<!-- 
  - @这是一个组件
 -->
<!-- <p>demo01 works!</p> -->

<ng-template #template01 let-notification01>
  <div class="ant-notification-notice-content divbox">
    <div>
      <div class="ant-notification-notice-message">Notification Title 01</div>
      <div class="ant-notification-notice-description">
        A function will be be called after the notification is closed (automatically after the "duration" time of
        manually).
      </div>
      <span class="ant-notification-notice-btn">
        <button nz-button nzType="primary" nzSize="small" (click)="handleNotification(notification01)">
          <span>确定</span>
        </button>
      </span>
    </div>
  </div>
</ng-template>

<button nz-button [nzType]="'primary'" (click)="createBasicNotification(template01)">
  {{ btnText }}
</button>

<!-- 十字架样式 -->
<div class="target-box">
  <div class="fixed-cross">
    <div class="fixed-cross__h"></div>
    <div class="fixed-cross__v"></div>
  </div>
</div>

<div class="x-box">
  <div class="x-xy x-x"></div>
  <div class="x-xy x-y"></div>
</div>


<div class="item-wrapper">
  <img class="item-avanta" src="../../assets/image/01.png" alt="">
  <div class="item-description-wrapper">
    <h2>
      设备管理员设备管理员设备管理员
    </h2>
    <span class="span-admin">设备管理员</span>
  </div>
</div>

<!-- <button (click)="handlerChild()">点击</button> -->



<!-- 点击确认点1/点2 -->
<!-- 移动时实时计算距离 -->
<!-- 双击重置 -->
<div class="canvas" (click)="onPointClick($event)" (mousemove)="onMouseMove($event)" (dblclick)="reset()">
  <!-- 实时显示距离（厘米，保留3位小数） -->
  <div *ngIf="showDistance" class="distance-info">
    距离: {{ currentDistance | number: '1.3-3' }} 厘米
  </div>

  <!-- 点标记、辅助线和临时线（SVG绘制） -->
  <svg class="drawing-layer" width="100%" height="100%">
    <!-- 最终辅助线（两点确认后显示） -->
    <line *ngIf="firstPoint && secondPoint" [attr.x1]="firstPoint.x" [attr.y1]="firstPoint.y" [attr.x2]="secondPoint.x"
      [attr.y2]="secondPoint.y" stroke="#ff4d4f" stroke-width="2" />

    <!-- 临时辅助线（点1确认后，鼠标移动时显示） -->
    <line *ngIf="firstPoint && !secondPoint && tempPoint" [attr.x1]="firstPoint.x" [attr.y1]="firstPoint.y"
      [attr.x2]="tempPoint.x" [attr.y2]="tempPoint.y" stroke="#999" stroke-width="1" stroke-dasharray="3,3" />

    <!-- 第一个点标记（红色） -->
    <g *ngIf="firstPoint">
      <circle [attr.cx]="firstPoint.x" [attr.cy]="firstPoint.y" r="6" fill="#ff4d4f" />
      <text [attr.x]="firstPoint.x + 10" [attr.y]="firstPoint.y - 10" fill="#333" font-size="12">
        点1 ({{ firstPoint.x }}, {{ firstPoint.y }})
      </text>
    </g>

    <!-- 第二个点标记（蓝色） -->
    <g *ngIf="secondPoint">
      <circle [attr.cx]="secondPoint.x" [attr.cy]="secondPoint.y" r="6" fill="#1890ff" />
      <text [attr.x]="secondPoint.x + 10" [attr.y]="secondPoint.y - 10" fill="#333" font-size="12">
        点2 ({{ secondPoint.x }}, {{ secondPoint.y }})
      </text>
    </g>
  </svg>
</div>

<!-- 重置按钮 -->
<button *ngIf="firstPoint" class="reset-btn" (click)="reset()">重新测量</button>